@import '../../_css/queries.scss';

.hero {
  padding-top: calc(var(--base) * 2);
  position: relative;
  overflow: hidden;

  @include large-break {
    padding-top: var(--base);
  }
}

.media {
  width: calc(100% + var(--gutter-h));
  left: calc(var(--gutter-h) / -2);
  margin-top: calc(var(--base) * 3);
  position: relative;

  @include mid-break {
    left: 0;
    margin-top: var(--base);
    margin-left: calc(var(--gutter-h) * -1);
    width: calc(100% + var(--gutter-h) * 2);
  }
}

.links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  padding-top: var(--base);
  flex-wrap: wrap;
  margin: calc(var(--base) * -0.5);

  & > * {
    margin: calc(var(--base) / 2);
  }
}

.caption {
  margin-top: var(--base);
  color: var(--color-base-500);
  left: calc(var(--gutter-h) / 2);
  width: calc(100% - var(--gutter-h));
  position: relative;

  @include mid-break {
    left: var(--gutter-h);
  }
}

.content {
  position: relative;
}
